<template>
  <div class="message-callback-container">
    <h2>微信消息回调测试</h2>
    
    <div class="form-section">
      <h3>发送测试消息</h3>
      <div class="form-group">
        <label for="messageContent">消息内容:</label>
        <textarea 
          id="messageContent"
          v-model="messageData.content"
          placeholder="请输入消息内容"
          rows="4"
        ></textarea>
      </div>
      
      <div class="form-group">
        <label for="messageType">消息类型:</label>
        <input 
          id="messageType"
          type="number"
          v-model.number="messageData.type"
          placeholder="默认为文本消息类型 1"
        >
      </div>
      
      <div class="form-group">
        <label for="fromUser">发送者ID:</label>
        <input 
          id="fromUser"
          v-model="messageData.fromUser"
          placeholder="如: user123"
        >
      </div>
      
      <button @click="sendMessage" class="send-btn">发送消息</button>
    </div>
    
    <div class="result-section" v-if="response">
      <h3>响应结果</h3>
      <div class="response-box">
        <pre>{{ response }}</pre>
      </div>
    </div>
    
    <div class="history-section" v-if="messageHistory.length > 0">
      <h3>历史消息</h3>
      <div class="history-list">
        <div v-for="(msg, index) in messageHistory" :key="index" class="history-item">
          <p><strong>时间:</strong> {{ msg.time }}</p>
          <p><strong>内容:</strong> {{ msg.content }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'MessageCallback',
  data() {
    return {
      messageData: {
        content: '',
        type: 1,
        fromUser: ''
      },
      response: null,
      messageHistory: []
    };
  },
  methods: {
    async sendMessage() {
      try {
        // 构造消息对象，根据后端接口要求
        const message = {
          content: this.messageData.content,
          type: this.messageData.type,
          fromUser: this.messageData.fromUser,
          timestamp: new Date().getTime()
        };
        
        // 发送请求到后端接口
        const result = await axios.post('/api/gewechat/message/callback', message);
        
        // 保存响应结果
        this.response = JSON.stringify(result.data, null, 2);
        
        // 添加到历史记录
        this.messageHistory.push({
          content: this.messageData.content,
          time: new Date().toLocaleString('zh-CN')
        });
        
        // 清空输入框
        this.messageData.content = '';
        
      } catch (error) {
        console.error('发送消息失败:', error);
        this.response = `错误: ${error.message || '未知错误'}`;
      }
    }
  }
};
</script>

<style scoped>
.message-callback-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f5f5f5;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

h2 {
  color: #333;
  text-align: center;
  margin-bottom: 30px;
}

h3 {
  color: #555;
  margin-bottom: 15px;
  font-size: 18px;
}

.form-section,
.result-section,
.history-section {
  margin-bottom: 30px;
  padding: 20px;
  background-color: #fff;
  border-radius: 6px;
}

.form-group {
  margin-bottom: 20px;
}

label {
  display: block;
  margin-bottom: 8px;
  color: #666;
  font-weight: 500;
}

input,
textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

textarea {
  resize: vertical;
}

.send-btn {
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.send-btn:hover {
  background-color: #45a049;
}

.response-box {
  background-color: #f8f9fa;
  padding: 15px;
  border-radius: 4px;
  border: 1px solid #e9ecef;
  max-height: 200px;
  overflow-y: auto;
}

pre {
  margin: 0;
  font-family: 'Courier New', Courier, monospace;
  font-size: 14px;
}

.history-list {
  max-height: 300px;
  overflow-y: auto;
}

.history-item {
  padding: 10px;
  margin-bottom: 10px;
  background-color: #f8f9fa;
  border-radius: 4px;
  border-left: 3px solid #4CAF50;
}

.history-item p {
  margin: 5px 0;
  font-size: 14px;
}
</style>